<template>
	<echartBox title="国债资金工程" width="651px" height="427px">
		<div class="echart-show" ref="chart"></div>
	</echartBox>
</template>

<script>
import * as echarts from "echarts";
import echartBox from "../echart-box.vue";

export default {
	name: "Page3ItemBox4",
	components: {
		echartBox,
	},
	props: {
		chartData: {
			type: Array,
			required: true,
			default: () => []
		}
	},
	methods: {
		// 初始化图表
		initChart() {
			this.buildAreaChart();
		},
		// 构建面积图
		buildAreaChart() {
			let _labelList = this.chartData.map((item) => item.name);
			let _valueList = this.chartData.map((item) => item.value);
			let chartContainer = this.$refs.chart;
			if (!chartContainer || chartContainer.clientWidth === 0 || chartContainer.clientHeight === 0) {
				console.warn('Chart container not ready, skipping chart initialization');
				return;
			}
			let myChart = echarts.init(chartContainer);

			const option = {
				backgroundColor: "transparent",
				tooltip: {
					show: true,
					trigger: "axis", //axis , item
					backgroundColor: "RGBA(0, 49, 85, 1)",
					borderColor: "rgba(0, 151, 251, 1)",
					borderWidth: 1,
					borderRadius: 0,
					textStyle: {
						color: "#BCE9FC",
						fontSize: 16,
						align: "left",
					},
					},
				grid: {
					left: "8%",
					right: "1%",
					bottom: "1%",
					top: "16%",
					containLabel: true,
				},
				xAxis: {
					type: "category",
					data: _labelList,
					axisLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.3)",
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: "#fff",
						fontSize: 15,
					},
				},
				yAxis: {
					name: '单位：万/m³',
					nameTextStyle: {
						color:'#fff'
					},
					type: "value",
					max: 1000,
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.1)",
							type: "dashed",
						},
					},
					axisLabel: {
						color: "#fff",
						fontSize: 15,
					},
				},
				series: [
					// 外层光晕效果
					{
						type: "line",
						data: _valueList,
						smooth: true,
						symbol: "none",
						lineStyle: {
							color: "rgba(0, 212, 255, 0.3)",
							width: 12,
							shadowColor: "#00d4ff",
							shadowBlur: 40,
							shadowOffsetX: 0,
							shadowOffsetY: 0,
						},
						z: 1,
					},
					// 主要折线
					{
						type: "line",
						data: _valueList,
						smooth: true,
						symbol: "circle",
						symbolSize: 8,
						lineStyle: {
							color: "#00d4ff",
							width: 5,
							shadowColor: "#00d4ff",
							shadowBlur: 25,
							shadowOffsetX: 0,
							shadowOffsetY: 0,
						},
						itemStyle: {
							color: "#00d4ff",
							borderColor: "#fff",
							borderWidth: 3,
							shadowColor: "#00d4ff",
							shadowBlur: 20,
							shadowOffsetX: 0,
							shadowOffsetY: 0,
						},
						areaStyle: {
							color: {
								type: "linear",
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: "rgba(0, 212, 255, 0.9)",
									},
									{
										offset: 0.3,
										color: "rgba(0, 212, 255, 0.7)",
									},
									{
										offset: 0.7,
										color: "rgba(0, 102, 153, 0.4)",
									},
									{
										offset: 1,
										color: "rgba(0, 34, 61, 0.15)",
									},
								],
							},
							shadowColor: "#00d4ff",
							shadowBlur: 35,
							shadowOffsetX: 0,
							shadowOffsetY: 3,
						},
						z: 2,
					},
				],
			};

			myChart.setOption(option);
		},
	},
};
</script>

<style scoped lang="scss">
.echart-show {
	width: 100%;
	height: 100%;
}
</style>